<%@ Page Language="C#" MasterPageFile="~/Site.master" Title="DataList Master Detail" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server">
    <h2>Master/Detail Filtering With a DropDownList</h2>
    <p>Select a category: <select id="ddlCategory"></select></p>
    <AjaxData:DataList ID="DataList1" runat="server" DataKeyField="ID" CssClass="DataWebControlStyle" ItemDataBoundEvent="onItemDataBound">
       <AlternatingItemStyle CssClass="AlternatingRowStyle" />
       <ItemStyle CssClass="RowStyle" />
       <HeaderStyle CssClass="HeaderStyle" />
       <FooterStyle CssClass="FooterStyle" />
       <HeaderTemplate><h3>Product Information</h3></HeaderTemplate>
        <ItemTemplate>
            <h4>
                <span id="spnProductName"></span>
            </h4>
            <table border="0">
                <tr>
                    <td class="ProductPropertyLabel">Category:</td>
                    <td><span id="spnCategory"></span></td>
                    <td class="ProductPropertyLabel">Supplier:</td>
                    <td><span id="spnSupplier"></span></td>
                </tr>
                <tr>
                    <td class="ProductPropertyLabel">Qty/Unit:</td>
                    <td><span id="spnQuantityPerUnit"></span></td>
                    <td class="ProductPropertyLabel">Price:</td>
                    <td><span id="spnUnitPrice"></span></td>
                </tr>
            </table>
        </ItemTemplate>
        <SeparatorTemplate>
            <hr />
        </SeparatorTemplate>
    </AjaxData:DataList>
    <script type="text/javascript">

        var _ddlCategory;

        function pageLoad(sender, e)
        {
            _ddlCategory = $get('ddlCategory');

            DataService.GetAllCategory(
                                            function(categories)
                                            {
                                                addListBoxItem(_ddlCategory, '[Select Category]', -1);

                                                if (categories)
                                                {
                                                    for(var i = 0; i < categories.length; i++)
                                                    {
                                                        addListBoxItem(_ddlCategory, categories[i].Name, categories[i].ID);
                                                    }
                                                }

                                                $addHandler(_ddlCategory, 'change', onCategoryChange);
                                            }
                                      );
            
        }

        function pageUnload(sender, e)
        {
            $removeHandler(_ddlCategory, 'change', onCategoryChange);
        }

        function onCategoryChange(e)
        {
            if (parseInt(_ddlCategory.options[_ddlCategory.selectedIndex].value) > -1)
            {
                loadProducts();
            }
        }

        function loadProducts()
        {
            DataService.GetProductsByCategory(parseInt(_ddlCategory.options[_ddlCategory.selectedIndex].value), onLoadSuccess);
        }

        function onLoadSuccess(products)
        {
            var dataList = DataList1;

            dataList.set_dataSource(products);
            dataList.dataBind();
        }

        function onItemDataBound(sender, e)
        {
            var item = e.get_item();

            if (item.get_isDataItemType())
            {
                var product = item.get_dataItem();

                var spnProductName = item.findControl('spnProductName');
                var spnCategory = item.findControl('spnCategory');
                var spnSupplier =  item.findControl('spnSupplier');
                var spnQuantityPerUnit = item.findControl('spnQuantityPerUnit');
                var spnUnitPrice = item.findControl('spnUnitPrice');

                setText(spnProductName, product.Name);
                setText(spnCategory, product.CategoryName);
                setText(spnSupplier, product.SupplierName);
                setText(spnQuantityPerUnit, product.QuantityPerUnit);
                setText(spnUnitPrice, product.UnitPrice.localeFormat('C'));
            }
        }

        function addListBoxItem(listBox, text, value)
        {
            var opt = document.createElement('option');

            listBox.appendChild(opt);

            setText(opt, text);

            if (value != null)
            {
                opt.value = value;
            }
        }

        function setText(element, text)
        {
            if (typeof element.textContent != 'undefined')
            {
                element.textContent = text;
            }
            else if (typeof element.innerText != 'undefined')
            {
                element.innerText = text;
            }
        }

    </script>
</asp:Content>